{% extends 'user/base.html' %}

{% block content %}
    <div class="flex items-center justify-center min-h-[calc(100vh-100px)]" style="margin-top: -120px">
        <div class="w-full max-w-md bg-white rounded-lg shadow-lg p-8">
            <div class="text-center mb-8">
                <h2 class="text-2xl font-bold text-gray-900">重置密码</h2>
            </div>

            <form method="post" class="space-y-6">
                <div>
                    <label for="username" class="block text-sm font-medium text-gray-700 mb-2">用户名</label>
                    <div class="relative">
                        <div class="input-icon absolute inset-y-0 left-0">
                            <i class="fas fa-user text-gray-400"></i>
                        </div>
                        <input type="text"
                               class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-button text-gray-900 placeholder-gray-400"
                               name="username"
                               id="username"
                               placeholder="请输入用户名" required>
                    </div>
                </div>

                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-2">邮箱</label>
                    <div class="relative">
                        <div class="input-icon absolute inset-y-0 left-0">
                            <i class="fas fa-user text-gray-400"></i>
                        </div>
                        <input type="email"
                               class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-button text-gray-900 placeholder-gray-400"
                               name="email"
                               id="email"
                               placeholder="请输入邮箱" required>
                    </div>
                </div>

                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-2">密码</label>
                    <div class="relative">
                        <div class="input-icon absolute inset-y-0 left-0">
                            <i class="fas fa-lock text-gray-400"></i>
                        </div>
                        <input type="password"
                               class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-button text-gray-900 placeholder-gray-400"
                               name="password"
                               id="password"
                               placeholder="请输入密码" required>
                    </div>
                </div>

                <div>
                    <label for="password_again" class="block text-sm font-medium text-gray-700 mb-2">重复密码</label>
                    <div class="relative">
                        <div class="input-icon absolute inset-y-0 left-0">
                            <i class="fas fa-lock text-gray-400"></i>
                        </div>
                        <input type="password"
                               class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-button text-gray-900 placeholder-gray-400"
                               name="password_again"
                               id="password_again"
                               placeholder="请再次输入密码" required>
                    </div>
                </div>

                <div>
                    <label for="code" class="block text-sm font-medium text-gray-700 mb-2">验证码</label>
                    <div class="flex space-x-2">
                        <input type="text"
                               class="w-2/3 pl-3 pr-3 py-2 border border-gray-300 rounded-button text-gray-900 placeholder-gray-400"
                               name="code"
                               id="code"
                               placeholder="请输入验证码" required>

                        <button type="button"
                                id="send-code-btn"
                                class="w-1/3 bg-gray-200 text-gray-700 py-2 px-4 rounded-button hover:bg-gray-300 transition-colors duration-200"
                                onclick="sendCode(this)">
                            发送验证码
                        </button>
                    </div>
                </div>

                <button type="submit"
                        class="w-full bg-primary text-white py-2 px-4 rounded-button hover:bg-opacity-90 transition-colors duration-200 whitespace-nowrap">
                    登录
                </button>

                <div class="text-center text-sm text-gray-600">
                    已有账号？ <a href="{{ url_for('user.login') }}"
                                 class="text-primary hover:text-opacity-80">返回登录</a>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script>
        function sendCode(button) {
            // 可根据需要添加邮箱或用户名校验
            const email = document.getElementById('email').value.trim();
            if (!email) {
                openAlert("请先输入邮箱");
                return;
            }

            fetch('/user/send_code', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({email: email})  // 假设用户名就是邮箱
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        startCountdown(button);
                        openAlert(data.message || '发送成功', 'success')
                    } else {
                        openAlert(data.error || '发送失败');
                    }
                })
                .catch(() => {
                    openAlert('发送失败，请重试');
                });
        }

        function startCountdown(button) {
            let countdown = 60;
            button.disabled = true;
            button.classList.add("bg-gray-400", "cursor-not-allowed");
            button.textContent = `${countdown}s`;

            const interval = setInterval(() => {
                countdown--;
                if (countdown <= 0) {
                    clearInterval(interval);
                    button.disabled = false;
                    button.classList.remove("bg-gray-400", "cursor-not-allowed");
                    button.textContent = '发送验证码';
                } else {
                    button.textContent = `${countdown}s`;
                }
            }, 1000);
        }
    </script>
{% endblock %}